<template>
  <section class="playlist">
    <h2 class="playlist-title">
      <span class="playlist-title__info">精选歌单</span>
      <span class="playlist-title__item"
        :class="{ 'playlist-title__item--active': cateHot.order === activeOrder }"
        @click="onSelect(cateHot.order)"
      >{{cateHot.title}}</span>
      <span class="playlist-title__item"
        :class="{ 'playlist-title__item--active': cateNew.order === activeOrder }"
        @click="onSelect(cateNew.order)"
      >{{cateNew.title}}</span>
      <router-link class="playlist-title__more"
        tag="span" to="/playlist-square">查看更多</router-link>
    </h2>

    <transition name="fade">
      <base-scroll class="playlist-content__wrapper" ref="scroll"
        :options="scrollOptions"
        :data="activePlaylist"
        v-loading="loading"
        m-loading-text="加载中..."
        m-loading-vertical="20px"
        m-loading-background="#fff">
        <ul class="playlist-content" ref="content"
          :style="{ height: contentHeight }">
          <base-playlist-item class="playlist-item"
            v-for="item of activePlaylist" :key="item.id"
            :width="`${itemWidth}px`"
            :id="item.id"
            :img="item.coverImgUrl"
            :desc="item.description || item.name"
            :playcount="item.playCount"
          />
        </ul>
      </base-scroll>
    </transition>
  </section>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
  name: 'home-playlist',
  data () {
    return {
      loading: true,
      cate: [
        { title: '最新', order: 'new' },
        { title: '最热', order: 'hot' }
      ],
      cateHot: {
        title: '最热',
        order: 'hot'
      },
      cateNew: {
        title: '最新',
        order: 'new'
      },
      activeOrder: 'hot',
      activePlaylist: [],
      scrollOptions: {
        scrollX: true,
        scrollY: false
      }
    }
  },
  mounted () {
    // 初始化，获取最热的前十个歌单
    this.initData({ order: this.activeOrder, limit: 10 })
  },
  beforeDestroy () {
    this.scroll && this.scroll.destroy()
  },
  computed: {
    ...mapGetters(['bodyWidth']),
    itemWidth () {
      return this.bodyWidth * 0.25
    },
    contentHeight () {
      // item 使用了 padding-bottom 占位，不能设置高度；通过设置其父元素高度来定高
      return `calc(${this.itemWidth}px + .5rem)`
    },
    scroll () {
      return this.$refs.scroll
    }
  },
  methods: {
    initData (params) {
      this.loading = true
      this.$api.getTopPlaylist(params).then(res => {
        const data = res.data
        this.activePlaylist = [].concat(data.playlists).map(v => ({
          id: v.id,
          name: v.name,
          description: v.description,
          coverImgUrl: v.coverImgUrl,
          playCount: v.playCount
        }))
        // 初始化滚动位置
        this.loading = false
        this.scroll && this.scroll.scrollTo(0, 0, 100)
      })
    },
    onSelect (item) {
      if (this.activeOrder === item) return
      this.activeOrder = item
      this.initData({ order: this.activeOrder, limit: 10 })
    }
  }
}
</script>

<style lang="scss" scoped>
@import '@/styles/variables.scss';

.playlist {
  box-sizing: border-box;
  position: relative;
  padding: 0 .1rem;
  &-title {
    position: relative;
    height: .5rem;
    line-height: .5rem;
    font-size: $font--medium;
    &__info {
      font-weight: 600;
    }
    &__item {
      margin: 0 .1rem;
      font-size: $font--small;
      color: #aaa;
      &--active {
        font-weight: bold;
        color: #000;
      }
    }
    &__more {
      position: absolute;
      right: 0;
      font-size: $font--small;
    }
  }
  &-content__wrapper {
    position: relative;
    overflow: hidden;
  }
  &-content {
    display: inline-flex;
    flex-direction: row;
  }
  &-item {
    &:not(:last-child) {
      margin-right: .1rem;
    }
  }
}
</style>
